<template>
  <div>
    <div class="app">
      <header>
        <div class="site-topbar">
          <div class="container">
            <nav>
              <a href="javascript:void(0);">小米商城</a>
              <span class="sep">|</span>
              <a href="#">MIUI</a>
              <span class="sep">|</span>
              <a href="#">IoT</a>
              <span class="sep">|</span>
              <a href="#">云服务</a>
              <span class="sep">|</span>
              <a href="#">金融</a>
              <span class="sep">|</span>
              <a href="#">有品</a>
              <span class="sep">|</span>
              <a href="#">小爱开放平台</a>
              <span class="sep">|</span>
              <a href="#">企业团购</a>
              <span class="sep">|</span>
              <a href="#">资质证照</a>
              <span class="sep">|</span>
              <a href="#">协议规则</a>
              <span class="sep">|</span>
              <a href="#">下载app</a>
              <span class="sep">|</span>
              <a href="#">Select Location</a>
            </nav>
            <div class="login">
              <el-button type="info" size="small" plain v-show="isLogin" @click="exitLogin">退出</el-button>
            </div>
            <div class="topcar">
              <a href="#">
                <em class="iconfont-cart iconfont"></em>
                <em class="iconfont-cart-full"></em>
                购物车
                （
                <span class="cart-mini-num">0</span>）
              </a>
              <div class="cart-menu">购物车中还没有商品，赶紧选购吧！</div>
            </div>
            <div class="topinfo">
              <nav>
                <a href="javascript:void(0);" @click="toLogin" v-show="!isLogin">登录</a>
                <span class="sep">|</span>
                <a href="javascript:void(0);" @click="toRegister" v-show="!isLogin">注册</a>
                <span class="sep">|</span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="user"
                  placement="left"
                  v-show="isLogin"
                >
                  <el-avatar
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                  ></el-avatar>
                </el-tooltip>
                <!-- <a href="javascript:void(0);" v-show="isLogin">
                  <el-avatar
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                  ></el-avatar>
                </a>-->
                <a href="#">消息通知</a>
              </nav>
            </div>
          </div>
        </div>
        <div class="site-header">
          <div class="container">
            <div class="site-logo">
              <a href="javascript:void(0);" title="小米官网" class="logo lr">"小米官网"</a>
            </div>
            <div class="header-nav">
              <ul class="nav-list clearfix">
                <li class></li>
                <li class="nav-item">
                  <a href="#">
                    <span class="text">小米手机</span>
                  </a>
                  <div class="item-children">
                    <div class="container">
                      <ul class="children-list clearfix">
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header01.webp" alt />
                            <p>
                              小米10 青春版 5G
                              <br />
                              <span>2099元起</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header02.webp" alt />
                            <p>
                              小米10 Pro
                              <br />
                              <span>4999元起</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header03.webp" alt />
                            <p>
                              小米10
                              <br />
                              <span>3799元起</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header04.png" alt />
                            <p>
                              小米cc9
                              <br />
                              <span>1499元起</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header05.png" alt />
                            <p>
                              小米cc9e
                              <br />
                              <span>1099元起</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header06.png" alt />
                            <p>
                              小米cc9 美图定制版
                              <br />
                              <span>1999元起</span>
                            </p>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="nav-item">
                  <a href="#">
                    <span class="text">Redmi 红米</span>
                  </a>
                  <div class="item-children">
                    <div class="container">
                      <ul class="children-list clearfix">
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header11.webp" alt />
                            <p>
                              Redmi 10X 4G
                              <br />
                              <span>999元起</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header12.webp" alt />
                            <p>
                              Redmi 10X 5G 系列
                              <br />
                              <span>1599元起</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header13.webp" alt />
                            <p>
                              Redmi K30 Pro
                              <br />
                              <span>2699元起</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header14.webp" alt />
                            <p>
                              Redmi K30 Pro 变焦版
                              <br />
                              <span>3799元起</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header15.webp" alt />
                            <p>
                              Redmi K30
                              <br />
                              <span>1399元起</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header16.webp" alt />
                            <p>
                              Redmi K30 5G
                              <br />
                              <span>1899元起</span>
                            </p>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="nav-item">
                  <a href="#">
                    <span class="text">电视</span>
                  </a>
                  <div class="item-children">
                    <div class="container">
                      <ul class="children-list clearfix">
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header21.webp" alt />
                            <p>
                              Redmi 智能电视 MAX 98''
                              <br />
                              <span>19999元</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header22.webp" alt />
                            <p>
                              小米电视4A 60英寸
                              <br />
                              <span>1899元</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header23.webp" alt />
                            <p>
                              Redmi 智能电视 X55
                              <br />
                              <span>1999元</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header24.webp" alt />
                            <p>
                              Redmi 红米电视 70英寸 R70A
                              <br />
                              <span>2999元</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header25.jpg" alt />
                            <p>
                              小米壁画电视 65英寸
                              <br />
                              <span>6999元</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header26.jpg" alt />
                            <p>
                              小米全面屏电视E55Av
                              <br />
                              <span>1599元</span>
                            </p>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="nav-item">
                  <a href="#">
                    <span class="text">笔记本</span>
                  </a>
                  <div class="item-children">
                    <div class="container">
                      <ul class="children-list clearfix">
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header31.webp" alt />
                            <p>
                              RedmiBook 16 锐龙版
                              <br />
                              <span>3599元起</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header32.webp" alt />
                            <p>
                              RedmiBook 14 Ⅱ 锐龙版
                              <br />
                              <span>3499元起</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header33.webp" alt />
                            <p>
                              RedmiBook 13 锐龙版
                              <br />
                              <span>3499元起</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header34.webp" alt />
                            <p>
                              RedmiBook 13
                              <br />
                              <span>4199元起</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header35.png" alt />
                            <p>
                              小米笔记本Pro 15
                              <br />
                              <span>5299元起</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header36.webp" alt />
                            <p>
                              RedmiBook 14
                              <br />
                              <span>3999元起</span>
                            </p>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="nav-item">
                  <a href="#">
                    <span class="text">家电</span>
                  </a>
                  <div class="item-children">
                    <div class="container">
                      <ul class="children-list clearfix">
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header41.webp" alt />
                            <p>
                              米家互联网空调C1（一级能效）
                              <br />
                              <span>1949元</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header42.png" alt />
                            <p>
                              米家互联网空调（一级能效）
                              <br />
                              <span>1949元</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header43.jpg" alt />
                            <p>
                              Redmi全自动波轮洗衣机1A
                              <br />
                              <span>779元</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header44.png" alt />
                            <p>
                              米家互联网洗烘一体机10kg
                              <br />
                              <span>1999元</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header45.webp" alt />
                            <p>
                              米家风冷对开门冰箱 483L
                              <br />
                              <span>2199元</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header46.webp" alt />
                            <p>
                              米家两门冰箱 160L
                              <br />
                              <span>899元</span>
                            </p>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="nav-item">
                  <a href="#">
                    <span class="text">路由器</span>
                  </a>
                  <div class="item-children">
                    <div class="container">
                      <ul class="children-list clearfix">
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header51.webp" alt />
                            <p>
                              Redmi路由器 AX5
                              <br />
                              <span>229元</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header52.webp" alt />
                            <p>
                              小米路由器 AX1800
                              <br />
                              <span>599元</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header53.webp" alt />
                            <p>
                              小米AIoT路由器AX3600
                              <br />
                              <span>779元</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header54.webp" alt />
                            <p>
                              Redmi路由器AC2100
                              <br />
                              <span>169元</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header55.webp" alt />
                            <p>
                              小米路由器AC2100
                              <br />
                              <span>229元</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header56.jpg" alt />
                            <p>
                              小米路由器 Mesh
                              <br />
                              <span>999元</span>
                            </p>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="nav-item">
                  <a href="#">
                    <span class="text">智能硬件</span>
                  </a>
                  <div class="item-children">
                    <div class="container">
                      <ul class="children-list clearfix">
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header61.jpg" alt="小米米家智能摄像机云台版" />
                            <p>
                              小米米家智能摄像机云台版
                              <br />
                              <span>179元</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header62.jpg" alt="小米小爱老师" />
                            <p>
                              小米小爱老师
                              <br />
                              <span>429元起</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header63.jpg" alt="小米米家智能门锁" />
                            <p>
                              小米米家智能门锁
                              <br />
                              <span>1099元起</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header64.webp" alt="Redmi小爱触屏音箱 8" />
                            <p>
                              Redmi小爱触屏音箱 8
                              <br />
                              <span>349元</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header65.jpg" alt="小米小爱触屏音箱" />
                            <p>
                              小米小爱触屏音箱
                              <br />
                              <span>199元起</span>
                            </p>
                          </a>
                        </li>
                        <span class="sep2"></span>
                        <li>
                          <a href="#">
                            <img src="@/views/Home/products/header66.webp" alt="Redmi小爱音箱 Play" />
                            <p>
                              Redmi小爱音箱 Play
                              <br />
                              <span>79元起</span>
                            </p>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="nav-item">
                  <a href="#">
                    <span class="text">服务</span>
                  </a>
                </li>
                <li class="nav-item">
                  <a href="#">
                    <span class="text">社区</span>
                  </a>
                </li>
              </ul>
            </div>
            <div class="header-search">
              <form action method="get" class="search-form clearfix">
                <input
                  type="search"
                  name="keyword"
                  id
                  autocomplete="off"
                  class="search-text"
                  placeholder="电视"
                />
                <input class="search-btn iconfont" type="submit" value="◉ " />
              </form>
            </div>
          </div>
        </div>
      </header>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isLogin: false,
      user: ''
    }
  },
  created() {
    const username = window.sessionStorage.getItem('username')
    this.user = username
    if (username === '' || username == null) {
      this.isLogin = false
    } else {
      this.isLogin = true
    }
  },
  mounted() {},
  methods: {
    toLogin() {
      this.$router.push('/login')
    },
    toRegister() {
      this.$router.push('/register')
    },
    exitLogin() {
      window.sessionStorage.setItem('username', '')
      this.toLogin()
    }
  }
}
</script>
<style scoped>
@import '../../../views/Home/css/footer.css';
@import '../../../views/Home/css/base.css';
@import '../../../views/Home/css/header.css';
@import '../../../views/Home/css/index.css';

.topinfo nav {
  position: relative;
}
.topinfo nav .item {
  margin: 4px;
}
.el-tooltip {
  height: 30px;
  width: 30px;
  position: absolute;
  right: 80px;
  top: 0px;
}
.login {
  position: relative;
}
.login .el-button {
  position: absolute;
  top: 4px;
  left: 1400px;
}
</style>
